<template>
  <div>
    <Card>
      <tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns" />
      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为excel文件</Button>
      <!-- <Button style="position:absolute; top: 27px; right: 17px;" type="primary" @click="addConfig">新增记录</Button> -->
    </Card>
    <Modal v-model="deleteVisible" @on-ok="handleDelete">
      <p>是否确定删除该条记录？</p>
    </Modal>
    <Modal v-model="visible" :title="title" :mask-closable="false" @on-ok="okModal" @on-cancel="cancelModal" width="1100">
      <Row>
        <Col span="12">
        <Row class="row" style="margin-top:0;">
          <Col span="8">
          <strong class="title">机器组名：</strong>
          </Col>
          <Col span="16">
          <Select v-model="machineGroupId" placeholder="请选择机器组名" class="form">
            <Option v-for="item in machineGroupNameList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          </Col>
        </Row>
        <Row class="row">
          <Col span="8">
          <strong class="title">机器编号：</strong>
          </Col>
          <Col span="16">
          <Input disabled v-model="machineNum" placeholder="请输入机器编号" class="form" />
          </Col>
        </Row>
        <Row class="row">
          <Col span="8">
          <strong class="title">机器名：</strong>
          </Col>
          <Col span="16">
          <Input v-model="machineName" placeholder="请输入机器名" class="form" />
          </Col>
        </Row>
        <Row class="row">
          <Col span="8">
          <strong class="title">网络状态：</strong>
          </Col>
          <Col span="16">
          <Select v-model="networkState" placeholder="请选择网络状态" class="form">
            <Option v-for="item in networkList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          </Col>
        </Row>
        <Row class="row">
          <Col span="8">
          <strong class="title">温度|湿度(­°C)：</strong>
          </Col>
          <Col span="16">
          <InputNumber v-model="temperature" placeholder="请输入温度|湿度(­°C)" class="form"
            :formatter="value => `${value}­°C`" />
          </Col>
        </Row>
        <Row class="row">
          <Col span="8">
          <strong class="title">门：</strong>
          </Col>
          <Col span="16">
          <Select v-model="door" placeholder="请选择门状态" class="form">
            <Option v-for="item in doorStateList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          </Col>
        </Row>
        <Row class="row">
          <Col span="8">
          <strong class="title">掉货检测：</strong>
          </Col>
          <Col span="16">
          <Select v-model="dropGood" placeholder="请选择掉货检测状态" class="form">
            <Option v-for="item in commonStateList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          </Col>
        </Row>
        <!-- <Row class="row">
          <Col span="8">
          <strong class="title">纸币器：</strong>
          </Col>
          <Col span="16">
          <Input v-model="noteMachine" placeholder="请输入纸币器编号" class="form" />
          </Col>
        </Row>
        <Row class="row">
          <Col span="8">
          <strong class="title">硬币器：</strong>
          </Col>
          <Col span="16">
          <Input v-model="coinMachine" placeholder="请输入硬币器编号" class="form" />
          </Col>
        </Row> -->
        </Col>
        <Col span="12">
        <Row class="row" style="margin-top:0;">
          <Col span="8">
          <strong class="title">货道：</strong>
          </Col>
          <Col span="16">
          <Select v-model="track" placeholder="请选择货道状态" class="form">
            <Option v-for="item in commonStateList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          </Col>
        </Row>
        <!-- <Row class="row">
          <Col span="8">
          <strong class="title">读卡器：</strong>
          </Col>
          <Col span="16">
          <Input v-model="cardReader" placeholder="请输入读卡器编号" class="form" />
          </Col>
        </Row> -->
        <Row class="row">
          <Col span="8">
          <strong class="title">本月已用流量(M)：</strong>
          </Col>
          <Col span="16">
          <InputNumber v-model="usedTraffic" placeholder="请输入本月已用流量" class="form" />
          </Col>
        </Row>
        <Row class="row">
          <Col span="8">
          <strong class="title">到期时间：</strong>
          </Col>
          <Col span="16">
          <DatePicker type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择到期时间" class="form"
            v-model="expirationDate" />
          </Col>
        </Row>
        <Row class="row">
          <Col span="8">
          <strong class="title">部署地址：</strong>
          </Col>
          <Col span="16">
          <Input v-model="deployAddress" placeholder="请输入部署地址" class="form" />
          </Col>
        </Row>
        <!-- <Row class="row">
          <Col span="8">
          <strong class="title">管理员：</strong>
          </Col>
          <Col span="16">
          <Input v-model="administrator" placeholder="请输入管理员" class="form" />
          </Col>
        </Row> -->
        <Row class="row">
          <Col span="8">
          <strong class="title">版本：</strong>
          </Col>
          <Col span="16">
          <Input v-model="version" placeholder="请输入版本" class="form" />
          </Col>
        </Row>
        <Row class="row">
          <Col span="8">
          <strong class="title">News版本：</strong>
          </Col>
          <Col span="16">
          <Input v-model="newVersion" placeholder="请输入News版本" class="form" />
          </Col>
        </Row>
        </Col>
      </Row>
    </Modal>
  </div>
</template>

<script>
import Tables from '_c/tables'
import {
  networkStates,
  networkList,
  doorStates,
  doorStateList,
  commonStates,
  commonStateList,
  yesOrNoStateList,
} from '@/mock/data/option-data.js'
import rcRequest from 'rc-request'
import jsCookie from 'js-cookie'

export default {
  name: 'discount_code_statis_page',
  components: {
    Tables
  },
  data() {
    return {
      columns: [
        { title: '机器组名', key: 'machineGroupName' },
        { title: '机器编号', key: 'machineNum' },
        { title: '机器名', key: 'machineName', width: 120 },
        {
          title: '网络状态',
          key: 'networkState',
          render: (h, params) => h('div', networkStates[params.row.networkState])
        },
        { title: '温度|湿度(­°C)', key: 'temperature' },
        {
          title: '门',
          key: 'door',
          render: (h, params) => h('div', doorStates[params.row.door])
        },
        {
          title: '掉货检测',
          key: 'dropGood',
          render: (h, params) => h('div', commonStates[params.row.dropGood])
        },
        // { title: '纸币器', key: 'noteMachine' },
        // { title: '硬币器', key: 'coinMachine' },
        {
          title: '货道',
          key: 'track',
          render: (h, params) => h('div', commonStates[params.row.track])
        },
        // { title: '读卡器', key: 'cardReader' },
        { title: '本月已用流量(M)', key: 'usedTraffic' },
        { title: '到期时间', key: 'expirationDate' },
        { title: '部署地址', key: 'deployAddress' },
        // { title: '管理员', key: 'administrator' },
        { title: '版本', key: 'version' },
        { title: 'News版本', key: 'newVersion' },
        {
          title: '操作',
          key: 'action',
          width: 140,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'info',
                  size: 'small',
                  ghost: true,
                },
                on: {
                  click: () => {
                    this.title = '修改记录';
                    this.visible = true;
                    this.machineGroupIndex = params.row.initRowIndex;
                    this.machineGroupName = params.row.machineGroupName;
                    this.machineGroupId = params.row.machineGroupId;
                    this.machineNum = params.row.machineNum;
                    this.machineName = params.row.machineName;
                    this.networkState = params.row.networkState;
                    this.temperature = params.row.temperature;
                    this.door = params.row.door;
                    this.dropGood = params.row.dropGood;
                    this.noteMachine = params.row.noteMachine;
                    this.coinMachine = params.row.coinMachine;
                    this.track = params.row.track;
                    this.cardReader = params.row.cardReader;
                    this.usedTraffic = params.row.usedTraffic;
                    this.expirationDate = new Date(params.row.expirationDate);
                    this.deployAddress = params.row.deployAddress;
                    this.administrator = params.row.administrator;
                    this.version = params.row.version;
                    this.newVersion = params.row.newVersion;
                  }
                }
              }, '修改'),
              h('span', {}, ' '),
              h('Button', {
                props: {
                  type: 'warning',
                  size: 'small',
                  ghost: true,
                },
                on: {
                  click: () => {
                    this.deleteIndex = params.index;
                    this.deleteVisible = true;
                  }
                },
              }, '删除')
            ]);
          }
        }
      ],
      tableData: [],
      networkList,
      doorStateList,
      commonStateList,
      yesOrNoStateList,
      machineGroupNameList: [],
      // 新增/修改状态监控
      title: '新增记录',
      visible: false,
      machineGroupIndex: -1,
      machineGroupName: '',
      machineGroupId: 0,
      machineNum: '',
      machineName: '',
      networkState: '',
      temperature: 0,
      door: '',
      dropGood: '',
      noteMachine: '',
      coinMachine: '',
      track: '',
      cardReader: '',
      usedTraffic: 0.00,
      expirationDate: '',
      deployAddress: '',
      administrator: '',
      version: '',
      newVersion: '',
      // 删除
      deleteVisible: false,
      deleteIndex: 0,
    }
  },
  methods: {
    async handleDelete() {
      const { machine_id } = this.tableData[this.deleteIndex];
      await rcRequest({
        method: 'post',
        data: { machine_id },
        url: '/machine/delete_machine_info',
      });
      this.tableData.splice(this.deleteIndex, 1);
      this.$Message.success('删除成功');
    },
    exportExcel() {
      this.$refs.tables.exportCsv({
        filename: `状态监控-${(new Date()).valueOf()}.csv`
      })
    },
    addConfig() {
      this.title = '新增记录';
      this.visible = true;
      this.machineGroupIndex = -1;
      this.machineGroupName = '';
      this.machineGroupId = 0;
      this.machineNum = '';
      this.machineName = '';
      this.networkState = '';
      this.temperature = 0;
      this.door = '';
      this.dropGood = '';
      this.noteMachine = '';
      this.coinMachine = '';
      this.track = '';
      this.cardReader = '';
      this.usedTraffic = 0.00;
      this.expirationDate = '';
      this.deployAddress = '';
      this.administrator = '';
      this.version = '';
      this.newVersion = '';
    },
    okModal() {
      // 新增
      if (this.machineGroupIndex < 0) {
        this.tableData.unshift({
          id: this.tableData.length + 1,
          machineGroupName: this.machineGroupName,
          machineGroupId: this.machineGroupId,
          machineNum: this.machineNum,
          machineName: this.machineName,
          networkState: this.networkState,
          temperature: this.temperature,
          door: this.door,
          dropGood: this.dropGood,
          noteMachine: this.noteMachine,
          coinMachine: this.coinMachine,
          track: this.track,
          cardReader: this.cardReader,
          usedTraffic: this.usedTraffic,
          expirationDate: this.expirationDate.toLocaleString().replace('/', '-').replace('/', '-'),
          deployAddress: this.deployAddress,
          administrator: this.administrator,
          version: this.version,
          newVersion: this.newVersion,
        });
        return;
      }

      // 修改
      this.modifyListData();
    },
    cancelModal() { },
    // 获取列表数据
    async getListData() {
      const { data: { data: result } } = await rcRequest({
        method: 'post',
        data: { },
        url: '/machine/select_machinegroup_machine_number_user',
      });
      this.tableData = result.map(item => ({
        id: item.id,
        machine_id: item.machine_id,
        machineGroupName: item.machine_group_name,
        machineGroupId: item.machine_group_id,
        machineNum: item.number,
        machineName: item.name,
        networkState: item.network_status,
        temperature: item.temperature,
        door: item.is_open,
        dropGood: item.is_detection,
        noteMachine: item.paper_money_machine,
        coinMachine: item.coin_machine,
        track: item.is_aisle,
        cardReader: item.card_reader,
        usedTraffic: item.month_traffic,
        expirationDate: item.expire_time,
        deployAddress: item.addr,
        administrator: item.administrator_phone,
        version: item.version,
        newVersion: item.new_version,
        machine_or_machine_group_id: item.machine_or_machine_group_id,
      }))
    },
    // 获取机器组列表数据
    async getGroupListData() {
      const { data: { data: groupResult } } = await rcRequest({
        method: 'post',
        data: { },
        url: '/machine_group/select_machinegroup_name',
      });
      this.machineGroupNameList = groupResult.map(item => ({ value: item.id, label: item.name }));
    },
    // 修改数据
    async modifyListData() {
      const {
        machine_id,
        machineGroupId,
        machine_or_machine_group_id,
      } = this.tableData[this.machineGroupIndex];
      await rcRequest({
        method: 'post',
        url: '/machine/update_machine_info2',
        data: {
          machine_group_id: this.machineGroupId,
          machine_id: machine_id,
          name: this.machineName,
          network_status: this.networkState,
          temperature: this.temperature,
          is_open: this.door,
          is_detection: this.dropGood,
          paper_money_machine: this.noteMachine,
          coin_machine: this.coinMachine,
          is_aisle: this.track,
          card_reader: this.cardReader,
          month_traffic: this.usedTraffic,
          expire_time: new Date(this.expirationDate).toLocaleString().replace('/', '-').replace('/', '-'),
          addr: this.deployAddress,
          administrator_phone: this.administrator,
          version: this.version,
          new_version: this.newVersion,
          old_machine_group_id: machineGroupId,
          new_machine_group_id: this.machineGroupId,
          machine_or_machine_group_id,
        },
      });
      this.getListData();
    },
  },
  mounted() {
    this.getListData();
    this.getGroupListData();
  }
}
</script>

<style scoped>
.row {
  margin-top: 20px;
  display: flex;
  align-items: center;
}

.title {
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
}

.form {
  width: 240px;
}
</style>
